<template>
    <div id="app">
		<div class="head_btn">
			<el-button round @click="card">卡片</el-button>
			<el-button round @click="lb">列表</el-button>
		</div>
		<div v-if="flag == 0" class="card_cls">
			<slot></slot>
        </div>
        
        <div v-if="flag == 1 && no == 1" class="tb_cls">
            <el-table :data="list" border style="width: 100%">
				<el-table-column prop="title"  label="项目名称">
					<template slot-scope="scope">
						<a href="#/biddetail"
						target="_blank"  v-if="scope.row.title == '襄阳市疾病预防控制中心迁建项目'" style="color:blue;">{{scope.row.title}}</a>
						<a v-else>{{scope.row.title}}</a>
					</template>
				</el-table-column>
				<el-table-column prop="dm" label="项目代码" width="180">
				</el-table-column>
				<el-table-column prop="jd" label="阶段">
				</el-table-column>
				<el-table-column prop="jsxz" label="建设性质" width="180">
				</el-table-column>
				<el-table-column prop="fbrq" label="发布时间" width="180">
				</el-table-column>
			</el-table>
        </div>

		<div v-if="flag == 1 && no == 2" class="tb_cls">
            <el-table :data="list" border style="width: 100%">
				<el-table-column prop="title" label="项目名称">
					<template slot-scope="scope">
						<a href="#/biddetail"
						target="_blank"  v-if="scope.row.title == '襄阳市疾病预防控制中心迁建项目'" style="color:blue;">{{scope.row.title}}</a>
						<a v-else>{{scope.row.title}}</a>
					</template>
				</el-table-column>
				<el-table-column prop="dm" label="项目代码" width="180">
				</el-table-column>
				<el-table-column prop="jhgl" label="计划管理">
				</el-table-column>
				<el-table-column prop="sjlx" label="审计立项" width="180">
				</el-table-column>
				<el-table-column prop="sqdc" label="审前调查" width="180">
				</el-table-column>
				<el-table-column prop="sjtzs" label="审计通知书" width="180">
				</el-table-column>
				<el-table-column prop="sjgzfa" label="审计工作方案" width="180">
				</el-table-column>
			</el-table>
        </div>

		<div v-if="flag == 1 && no == 3" class="tb_cls">
            <el-table :data="list" border style="width: 100%">
				<el-table-column prop="title" label="项目名称">
					<template slot-scope="scope">
						<a href="#/biddetail"
						target="_blank"  v-if="scope.row.title == '襄阳市疾病预防控制中心迁建项目'" style="color:blue;">{{scope.row.title}}</a>
						<a v-else>{{scope.row.title}}</a>
					</template>
				</el-table-column>
				<el-table-column prop="dm" label="项目代码" width="180">
				</el-table-column>
				<el-table-column prop="jd" label="阶段">
				</el-table-column>
				<el-table-column prop="wt" label="疑点/问题整改数量">
				</el-table-column>
				<el-table-column prop="pfsx" label="需完成的批复和手续">
				</el-table-column>
				<el-table-column  label="操作">
					<template slot-scope="scope">
						<a @click ="sh" style="color: blue;">{{scope.row.cz1}}</a>
						<a @click ="shsx" style="color: blue;">{{scope.row.cz2}}</a>
						<a @click ="gzdg" style="color: blue;">{{scope.row.cz3}}</a>
					</template>

				</el-table-column>
			</el-table>
        </div>

		<div v-if="flag == 1 && no == 4" class="tb_cls">
            <el-table :data="list" border style="width: 100%">
				<el-table-column prop="title" label="标题">
					<template slot-scope="scope">
						<a href="#/biddetail"
						target="_blank"  v-if="scope.row.title == '襄阳市疾病预防控制中心迁建项目'" style="color:blue;">{{scope.row.title}}</a>
						<a v-else>{{scope.row.title}}</a>
					</template>

				</el-table-column>
				<el-table-column prop="fbrq" label="发布时间" >
				</el-table-column>
				<el-table-column prop="cz" label="操作" >
					<template slot-scope="scope">
						<a @click ="msg(scope.row.cz1)" style="color: blue;">{{scope.row.cz1}}</a>
						<a @click ="msg(scope.row.cz2)" style="color: blue;">{{scope.row.cz2}}</a>
						<a @click ="msg(scope.row.cz3)" style="color: blue;">{{scope.row.cz3}}</a>
					</template>
				</el-table-column>
			</el-table>
        </div>
    </div>
</template>

<script>
    export default{
        name: "cardList",
        props: {
            list: [],
			no: ""
        },

        data () {
            return {
                flag : 0
            }
        },
        methods: {
			card() {
				this.flag = 0
				console.log("点击卡片---------------" + this.flag)
			},
			lb() {
				this.flag = 1
				console.log("点击列表---------------" + this.flag)
			},
			sh(){
				alert("审核信息")
			},
			shsx(){
				alert("审核事项")
			},
			gzdg(){
				alert("工作底稿")
			},
			msg(data){
				alert(data)
			}
        },
    }
</script>

<style scoped>
    .text {
		font-size: 14px;
	}

	.item {
		margin-bottom: 18px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}
	
	.clearfix:after {
		clear: both
	}

	.box-card {
		width: 360px;
		margin: 10px;
	}

	#app {
		width: 100%;
		padding: 10px;
	}

	.box {
		width: 100%;
		height: 40px;
		display: flex;
		border-left: 1px solid #e9e9e9;
		border-top: 1px solid #e9e9e9;
	}

	.content1 {
		width: 50%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-right: 1px solid #e9e9e9;
		border-bottom: 1px solid #e9e9e9;
		color: #333;
		font-size: 14px;
	}

	.content2 {
		width: 50%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		background-color: #fff;
		border-right: 1px solid #e9e9e9;
		border-bottom: 1px solid #e9e9e9;
		color: #b0b0b2;
		font-size: 14px;
	}

	.btn_1 {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.head_btn {
		display: flex;
		justify-content: center;
	}

	.tb_cls {
		margin-top: 20px;
	}
	
	.card_cls{
		margin-top: 10px;
	}
</style>